<template>
    <QueryBase @onSearch="doQuery" @onAdd="handleAdd">
        <template #operation>
            <div></div>
        </template>
        <template #search>
            <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item :label="t('名称')">
                    <el-input v-model="queryForm.name" placeholder="请输入" clearable v-enter="doQuery" />
                </el-form-item>
            </el-form>
        </template>
        <el-table :data="tableData" :border="true" header-row-class-name="table-header" height="60vh">
            <el-table-column prop="loginid" :label="t('账号')" width="180" />
            <el-table-column prop="loginname" :label="t('名称')" width="180" />
            <el-table-column prop="mobile" :label="t('手机号')" />
            <el-table-column prop="avatar" :label="t('头像')">
                <template #default="scope">
                    <v-image :src="scope.row.avatar" :style="{ width: '65px', height: '65px' }" :disabled="true"
                        fit="contain"></v-image>
                </template>
            </el-table-column>
            <el-table-column :label="t('操作')">
                <template #default="scope">
                    <div style="display: flex;" v-if="action('edit')">
                        <el-button type="text" @click="handleModify(scope.row)">修改</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="users-result-pn">
            <VPageNavigation :total="total" @on-size-changed="handleSizeChange" @on-page-changed="handleCurrentChange">
            </VPageNavigation>
        </div>
    </QueryBase>
    <UserEditor @onSubmited="(data) => { doQuery() }" v-model:show="showEditor" :mode="mode" :data="editModel">
    </UserEditor>
</template>
<script setup lang="ts">
import { Ref, onMounted, reactive, ref, watch } from 'vue';
import { t } from '@/common/locale'
import { Sysinfo } from '@/common/config';
import elHelper from '@/common/elHelper';
import VImage from '@/components/other/VImage.vue';
import UserEditor from '@/components/users/UserEditor.vue';
import VPageNavigation from '@/components/other/VPageNavigation.vue';
import QueryBase from '@/components/layout/QueryBase.vue';
import { action } from '@/common/actionHelper';
import { queryUsersBy } from '@/api/users';


const queryForm: NewsQueryForm = reactive({
    name: ''
})
const page = ref(1)
const pageSize = ref(Sysinfo.PageSize)
const tableData: Ref<UserModel[]> = ref([])
const total = ref(0)
const mode = ref('add')
const editModel: UserModel = reactive({})
const showEditor = ref(false)

const doQuery = async () => {
    if (!action('view')) {
        elHelper.showErrorMsg('权限不足')
        return
    }
    const loading = elHelper.showLoading()
    const re = await queryUsersBy({
        name: queryForm.name,
        pageSize: pageSize.value,
        to: page.value
    })
    if (re.isSuccess) {
        tableData.value = re.data || []

        total.value = re.totalRow || 0
        page.value = re.pageNum || 1
    } else {
        elHelper.showErrorMsg(re.msg)
    }
    elHelper.closeLoading(loading)
}

const handleSizeChange = (val: number) => {
    pageSize.value = val
    doQuery()
}
const handleCurrentChange = (val: number) => {
    page.value = val
    doQuery()
}
const handleAdd = () => {
    editModel.loginid = ''
    editModel.loginname = ''
    editModel.uid = ''
    editModel.avatar = ''
    editModel.mobile = ''
    editModel.usertype = 'System'
    editModel.roleId = []
    editModel.roles = []
    mode.value = 'add'
    showEditor.value = true
}
const handleModify = (data: UserModel) => {
    Object.assign(editModel, data)
    mode.value = 'modify'
    showEditor.value = true
}
onMounted(() => {
    doQuery()
})

</script>
<style scoped lang="scss">
.users-result-pn {
    padding-top: 15px;
    display: flex;
    justify-content: flex-end;
}
</style>